<template>
    <div class="header">
      <v-app-bar color="black" flat height="48">
        <v-container
          class="v-locale--is-ltr mx-auto d-flex align-center justify-space-between"
        >
          <v-btn
            v-if="$vuetify.display.smAndDown"
            icon="ri-menu-line"
            size="default"
            @click="drawer = !drawer"
          ></v-btn>
          <div class="d-flex flex-1 align-center">
            <div class="logo"></div>
            <template v-if="$vuetify.display.mdAndUp">
              <div class="menu d-flex flex-row ga-5 ml-5">
                <a class="text-body-1" v-for="(item, i) in items" href="#">{{ item.text }}</a>
              </div>
            </template>
          </div>
          <div class="d-flex align-center">
            <v-btn
              v-if="$vuetify.display.mdAndUp"
              class="mr-2"
              size="small"
              variant="outlined"
            >
              技术支持
            </v-btn>
            <!-- <v-btn
              v-if="$vuetify.display.mdAndUp"
              class="mr-2"
              size="small"
              color="gray"
              variant="tonal"
            >
              商城
            </v-btn> -->
            <!-- <v-icon class="px-4">ri-global-line</v-icon>
            <v-icon class="px-4">ri-account-circle-line</v-icon> -->
            <v-btn
              v-if="$vuetify.display.mdAndUp"
              class="mr-2"
              size="small"
              color="gray"
              variant="tonal"
            >
            <v-icon icon="ri-search-line"></v-icon>
            </v-btn>
            
            <!-- <v-icon-btn icon="ri-account-circle-line"></v-icon-btn> -->
          </div>
        </v-container>
      </v-app-bar>
  
      <v-navigation-drawer
        v-model="drawer"
        location="top"
        temporary
        width="355"
      >
        <v-list class="py-0" slim>
          <v-list-item v-for="item in items" link :prepend-icon="item.icon" :title="item.text" />
          <!-- <v-list-group
            prepend-icon="mdi:mdi-account-multiple-outline"
            title="Customers"
          >
            <template #activator="{ props: activatorProps }">
              <v-list-item v-bind="activatorProps" />
            </template>
  
            <v-list-item
              link
              prepend-icon="mdi:mdi-account-plus-outline"
              title="Create New"
            />
  
            <v-list-group prepend-icon="mdi:mdi-magnify" title="Search">
              <template #activator="{ props: activatorProps }">
                <v-list-item v-bind="activatorProps" />
              </template>
  
              <v-list-item
                link
                prepend-icon="mdi:mdi-account-outline"
                title="By Name"
              />
  
              <v-list-item
                link
                prepend-icon="mdi:mdi-email-outline"
                title="By Email"
              />
  
              <v-list-item
                link
                prepend-icon="mdi:mdi-phone-outline"
                title="By Phone"
              />
            </v-list-group>
          </v-list-group> -->
          <v-divider />
          <v-list-item
            prepend-avatar="https://vuetifyjs.b-cdn.net/docs/images/avatars/planetary-subscriber.png"
            title="Powered by CFFK"
            subtitle="CF发卡平台"
          />
        </v-list>
      </v-navigation-drawer>
    </div>
  </template>
  
  <script setup>
  import { shallowRef } from "vue";
  import { VIconBtn } from 'vuetify/labs/VIconBtn'
  
  const drawer = shallowRef(false);
  const items = [
    {
      text: "首页",
      icon: "ri-home-line",
      url: "/",
    },
    {
      text: "公告",
      icon: "ri-notification-3-line",
      url: "/",
    },
    {
      text: "分类",
      icon: "ri-menu-fold-4-line",
      url: "/",
    },
    {
      text: "关于",
      icon: "ri-information-line",
      url: "/",
    },
  ];
  </script>
  
  <style lang="scss" scoped>
  .v-navigation-drawer {
    &:not(.v-navigation-drawer--active) {
      display: none !important;
    }
  }

  .logo {
    mask: url(/images/logo.png) 50% 50% / contain no-repeat;
    background-color: currentcolor;
    aspect-ratio: 46 / 14;
    height: 22px;
    width: auto;
  }
  
  .menu {
    a {
      white-space: nowrap;
      font-size: 13px;
      line-height: 1.4;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  </style>
  